<style type="text/css">

    div.css3droppanel { /* Main wrapper for push down panel */
        position: relative;
        margin: 0;
        margin-bottom: 1em; /* margin with rest of content on page */
    }


    div.css3droppanel > div { /* Content DIV DIV inside wrapper */
        height: 10px; /* initial height of content when hidden. Should be same height as bottom bar (see div.css3droppanel:after) */
        padding: 5px;
        -moz-box-sizing: border-box; /* ensure any padding and border declared inside content DIV doesn't increase DIV's declared dimensions */
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        overflow: hidden;
        /*background: #b5e5e0;  background of content DIV */
        position: relative;
        opacity: 0;
        -moz-transition: all 0.2s ease-in-out 0.1s;  /* CSS3 transition of UL state. Last 0.1s specifies delay before animation */
        -o-transition: all 0.2s ease-in-out 0.1s; /* instead of ease-in-out, also try cubic-bezier(0.25, 0.1, 0.25, 1.4) instead */
        -webkit-transition: all 0.2s ease-in-out 0.1s;
        transition: all 0.2s ease-in-out 0.1s;
    }

    div.css3droppanel:after { /* Add bottom bar beneath wrapper */
        content: '';
        display: block;
        bottom: 0;
        position: absolute;
        width: 100%;
        height: 10px;
        box-shadow: 0 3px 8px gray, 3px 3px 4px rgb(245, 236, 236) inset;
        background: #5a1619; /* dark redish background and its gradient versions */
        background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(56,38,39,0.72)));
        background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
        background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
        background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
        background: linear-gradient(to bottom, rgba(146, 154, 163, 1) 0%,rgba(206, 206, 206, 1) 50%,rgba(145, 145, 145, 0.72) 100%);
    }


    div.css3droppanel input[type="checkbox"] { /* style invisible checkbox element used to toggle state of push down panel */
        position: absolute;
        right: 50px; /* right position of checkbox */
        width: 60px; /* width of checkbox */
        height: 50px; /* height of checkbox */
        bottom: -34px; /* bottom offset of checkbox */
        z-index: 10;
        cursor: pointer;
        opacity: 0;
    }

    div.css3droppanel input[type="checkbox"]:checked ~ div { /* when checkbox is checked, expand content within wrapper */
        height: 100%; /* height of content to expand to. Scrollbar will be shown if content overflows this height */
        opacity: 1;
/*        overflow: auto;*/
    }

    div.css3droppanel label {
        content: 'History';
        position: absolute;
        right: 50px;
        width: 80px;
        height: 50px;
        bottom: -40px;
                border-bottom-left-radius: 30px;
                border-bottom-right-radius: 30px;
        cursor: pointer;
        /*z-index: 5;*/
        background: rgb(122, 121, 121);
        background: -moz-linear-gradient(top, rgba(248, 248, 248, 1) 0%, rgba(100, 100, 100, 1) 50%, rgba(34, 34, 34, 0.72) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230, 230, 230, 1)), color-stop(50%,rgba(117, 117, 117, 1)), color-stop(100%,rgba(34, 34, 34, 0.72)));
        background: -webkit-linear-gradient(top, rgba(245, 239, 239, 1) 0%,rgba(121, 118, 119, 1) 50%,rgba(48, 48, 48, 0.72) 100%);
        background: -o-linear-gradient(top, rgba(219, 217, 217, 1) 0%,rgba(99, 97, 97, 1) 50%,rgba(10, 10, 10, 0.72) 100%);
        background: -ms-linear-gradient(top, rgba(247, 242, 242, 1) 0%,rgba(173, 170, 170, 1) 50%,rgba(49, 49, 49, 0.72) 100%);
        background: linear-gradient(to bottom, rgba(228, 228, 228, 1) 0%,rgba(187, 187, 187, 1) 50%,rgba(136, 126, 126, 0.72) 100%);
        box-shadow: 0 3px 8px rgb(99, 99, 99), 5px 5px 6px rgb(218, 218, 218) inset, 0 -3px 3px rgba(138, 138, 138, 0.7) inset, 0 5px 0 rgba(221, 221, 221, 0.7) inset;
    }

/*    div.css3droppanel label:hover {  style of label when mouse rolls over it 
        box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.8) inset;
    }*/
    div.css3droppanel label:before {
        content: 'History';
        color: white;
    }

    div.css3droppanel label:after { /* generated down arrow */
        content: '';
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border: 12px solid transparent;
        border-color: white transparent transparent transparent;
        top: 33px;
        left: 28px;
        box-shadow: 0 0 7px gray inset;
    }

</style>

<!--[if lte IE 8]>

<style>

/* Hide panel from IE8 and below */

div.css3droppanel {
                display: none;
                }

</style>

<![endif]-->


<div class="css3droppanel">
    <input type="checkbox" id="paneltoggle" title="Click to view history"/>
    <label for="paneltoggle" title="Click to view history" style="padding-top: 6px; text-align: center"></label>
    <div class="">
        <iframe src='http://embed.verite.co/timeline/?source=0AhiSE0j-ZyjddGktck4wQ2EtM2NpUHczZTM3VVBNMXc&font=Bevan-PotanoSans&maptype=toner&lang=en&height=650' width='100%' height='650' frameborder='0'></iframe>
    </div>
</div>
